<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<button id="moveId" onclick="moveInAction()">进入</button>
<button id="moveOut" onclick="moveOutAction()">退出</button>
<div id="animationSandbox" style="width: 500px;height: 500px;background: #13c2c2" class="testcla"></div>
<script>

  function doAction(cla) {
    $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
      $(this).removeClass()
    })
  }

  function moveInAction() {
    $('#animationSandbox').removeClass().addClass('animated flipInX').removeClass().addClass('animated flipOutX')
  }

  function moveOutAction() {
    $('#animationSandbox').removeClass('flipInX').addClass('flipOutX')
  }
</script>
</body>
</html>